Auto detect CSS property handling#92
Auto detect CSS property handling#92alancutter wants to merge 4 commits intoweb-animations:masterfrom alancutter:propertyHandlingDiscovery
Conversation
src/transform-handler.js
Outdated
There was a problem hiding this comment.
which property other than 'transform' would support transform values?
There was a problem hiding this comment.
None, it's just more code to support an alternate way to specify property handling that's not really necessary.
Need to skip animation/transitions properties. |
|
Can you get results for IE too? |
|
I really like this approach overall. How expensive is it to run through all the properties? |
|
Skipping animation properties. |
This seems too expensive. How many different property types are we going to have? Is it any better using CSS.supports (probably not supported in IE)?
Seems like it's a time/size tradeoff now.
The results for transform seem a bit strange. |
There was a problem hiding this comment.
Compute the list of possible properties once, outside of propertiesAcceptingCssValues.
Attach handlers to properties according to whether they accept the type of CSS value.
Properties auto discovered:
Chrome
color-handler.js
background, backgroundColor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRight, borderRightColor, borderTop, borderTopColor, color, fill, floodColor, lightingColor, outline, outlineColor, stopColor, stroke, textLineThroughColor, textOverlineColor, textUnderlineColor
dimension-handler.js
backgroundPositionX, backgroundPositionY, backgroundSize, baselineShift, border, borderBottom, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderImageOutset, borderImageWidth, borderLeft, borderLeftWidth, borderRadius, borderRight, borderRightWidth, borderSpacing, borderTop, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth, bottom, flexBasis, fontSize, height, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, outline, outlineOffset, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, perspective, right, size, strokeDasharray, strokeDashoffset, strokeWidth, textIndent, textLineThroughWidth, textOverlineWidth, textUnderlineWidth, top, verticalAlign, width, wordSpacing
number-handler.js
borderImageOutset, borderImageWidth, fillOpacity, flexGrow, flexShrink, floodOpacity, lineHeight, opacity, stopOpacity, strokeMiterlimit, strokeOpacity, textLineThroughWidth, textOverlineWidth, textUnderlineWidth, zoom
transform-handler.js
transform
Firefox
color-handler.js
backgroundColor, borderBottomColor, borderColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor, fill, floodColor, lightingColor, stopColor, stroke
dimension-handler.js
borderBottomWidth, borderLeftWidth, borderRightWidth, borderSpacing, borderTopWidth, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, bottom, flexBasis, fontSize, height, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, markerOffset, maxHeight, maxWidth, minHeight, minWidth, outlineWidth, outlineOffset, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, right, size, textIndent, perspective, top, verticalAlign, width, wordSpacing, strokeDasharray, strokeDashoffset, strokeWidth
number-handler.js
flexGrow, flexShrink, fontSizeAdjust, lineHeight, opacity, fillOpacity, floodOpacity, stopOpacity, strokeDasharray, strokeDashoffset, strokeOpacity, strokeWidth
transform-handler.js
transform
Internet Explorer
color-handler.js
scrollbar3dLightColor, scrollbarArrowColor, scrollbarBaseColor, scrollbarDarkShadowColor, scrollbarFaceColor, scrollbarHighlightColor, scrollbarShadowColor, scrollbarTrackColor, background, backgroundColor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRight, borderRightColor, borderSpacing, borderTop, borderTopColor, color, columnRule, columnRuleColor, fill, floodColor, fontFamily, lightingColor, outline, outlineColor, stopColor, stroke
dimension-handler.js
backgroundPositionX, backgroundPositionY, layoutGridChar, layoutGridLine, zoom, background, backgroundPosition, backgroundSize, baselineShift, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderLeftWidth, borderRadius, borderRightWidth, borderSpacing, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth, bottom, columnGap, columnRuleWidth, columnWidth, flexBasis, fontFamily, fontSize, height, kerning, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, outline, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, perspective, right, strokeDasharray, strokeDashoffset, strokeWidth, textIndent, top, verticalAlign, width, wordSpacing
number-handler.js
zoom, borderImage, borderImageOutset, borderImageSlice, borderImageWidth, borderSpacing, fillOpacity, flexGrow, flexShrink, floodOpacity, fontFamily, kerning, lineHeight, opacity, stopOpacity, strokeDasharray, strokeDashoffset, strokeMiterlimit, strokeOpacity, strokeWidth
transform-handler.js
borderSpacing, fontFamily, transform